<!-- eslint-disable vue/valid-v-model -->
<template>
  <el-form label-width="90px" label-position="left">
    <div style="padding: 10px">
      <el-button type="primary" style="width: 100%" @click="addEvent">添加事件</el-button>
    </div>
    <el-collapse v-model="activeName" v-if="penEvents && penEvents.length" :key="key">
      <el-collapse-item v-for="(evt, index) in penEvents" :key="index" :name="`collapse${index}`">
        <template #title>
          <span>{{ `事件${index + 1}` }}</span>
          <i class="collapse-delete-icon t-icon t-shanchu--" @click.stop="deleteEvent(index)"></i>
        </template>

        <div class="collapse-content">
          <el-form-item label="事件类型">
            <el-select popper-class="editor-container-scss" v-model="evt['name']" clearable
              @change="onChangeName($event, evt)">
              <el-option v-for="item in eventTypeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="事件行为">
            <el-select popper-class="editor-container-scss" v-model="evt['action']" clearable
              @change="onChangeAction($event, evt)">
              <el-option v-for="item in eventActionOptions" :key="item.value" :label="item.label" :value="item.value"
                :disabled="item.value == EventAction.Emit && evt['name'] === 'valueUpdate'">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="控制命令" v-if="evt['action'] === EventAction.Emit">
            <el-select popper-class="editor-container-scss" v-model="evt.params" value-key="id" clearable>
              <el-option v-for="item in controlCommandOptions" :key="item.id" :label="item.commandName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="动画目标" v-if="AnimationsEventAction.includes(evt['action'])">
            <el-input v-model="evt['value']" placeholder="目标id,默认自身"></el-input>
          </el-form-item>

          <el-form-item label="链接地址" v-if="evt['action'] === EventAction.Link">
            <el-input v-model="evt['value']" placeholder="url"></el-input>
          </el-form-item>

          <el-form-item label="打开方式" v-if="evt['action'] === EventAction.Link">
            <el-select popper-class="editor-container-scss" v-model="evt['params']" clearable>
              <el-option v-for="item in urlOpenOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="目标" v-if="evt['action'] === EventAction.Link || evt['action'] === EventAction.SetProps">
            <el-input v-model="evt['params']" placeholder="默认自身"></el-input>
          </el-form-item>

          <template v-if="evt['action'] === EventAction.SetProps">
            <div class="set-props-wrapper">
              <div class="set-props-header props-grid">
                <div class="column">Key</div>
                <div class="column">Value</div>
                <div class="props-icon icon" @click.stop="addProp(evt)">
                  <el-link :icon="Plus" :underline="false"></el-link>
                </div>
              </div>
              <div class="set-props-content">
                <div class="row props-grid" v-for="(row, idx) in evt.setProps" :key="idx">
                  <div>
                    <el-select popper-class="editor-container-scss" class="row-input" v-model="row.key" clearable
                      @change="onSelect(evt, row)" style="width: 85px">
                      <el-option v-for="item in propsOptions" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div>
                    <div v-if="row.formOption">
                      <el-input-number controls-position="right" :max="row.formOption.max" :min="row.formOption.min"
                        :step="row.formOption.step" style="max-width: 87px"
                        v-if="row.formOption.type === 'input-number'" @input="onPropChange(evt)" class="row-input"
                        v-model="row.value"></el-input-number>
                      <el-select v-if="row.formOption.type === 'showChild'" style="width: 120px;" popper-class="editor-container-scss"
                        v-model="row.value" placeholder="状态" @change="onPropChange(evt)">
                        <el-option v-for="(item, index) in store.currentPen.children" :key="index"
                          :label="`状态${index + 1}`" :value="index">
                        </el-option>
                      </el-select>
                      <el-color-picker show-alpha :predefine="ColorPredefine" v-if="row.formOption.type === 'color'"
                        @change="onPropChange(evt)" class="row-input" v-model="row.value"></el-color-picker>
                      <el-switch v-if="row.formOption.type === 'switch'" @input="onPropChange(evt)"
                        v-model="row.value"></el-switch>
                      <el-input v-if="row.formOption.type === 'input'" @input="onPropChange(evt)" class="row-input"
                        v-model="row.value"></el-input>
                    </div>
                  </div>
                  <div class="props-icon icon" @click.stop="deleteProp(evt, idx)">
                    <el-link @click.stop="deleteProp(evt, idx)" :icon="Delete" :underline="false"></el-link>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <template v-if="evt['action'] === EventAction.JS">
            <el-form-item label="函数定义">
              <el-input type="textarea" :rows="5" v-model="evt.value"></el-input>
            </el-form-item>
            <el-form-item label="函数参数">
              <el-input v-model="evt.params"></el-input>
            </el-form-item>
          </template>

          <template v-if="evt['action'] === EventAction.GlobalFn">
            <el-form-item label="全局函数名">
              <el-input v-model="evt.value"></el-input>
            </el-form-item>
            <el-form-item label="函数参数">
              <el-input v-model="evt.params"></el-input>
            </el-form-item>
          </template>

          <template v-if="evt['action'] === EventAction.Emit && false">
            <el-form-item label="消息名称">
              <el-input v-model="evt.value"></el-input>
            </el-form-item>
            <el-form-item label="消息内容">
              <el-input v-model="evt.params"></el-input>
            </el-form-item>
          </template>

          <el-form-item label="触发条件" v-if="evt.where">
            <el-select popper-class="editor-container-scss" v-model="evt.where.type" @change="whereChange(evt)">
              <el-option v-for="item in whereTypeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <template v-if="evt.where && evt.where.type === 'comparison'">
            <el-form-item label="属性">
              <el-select popper-class="editor-container-scss" v-model="evt.where.key" clearable>
                <el-option v-for="item in evnetOptionName" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="比较条件">
              <el-select popper-class="editor-container-scss" v-model="evt.where.comparison" clearable>
                <el-option v-for="item in comparisonOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="属性值">
              <el-input v-model="evt.where.value"></el-input>
            </el-form-item>
          </template>

          <el-form-item label="判断JS" v-if="evt.where && evt.where.type === 'fnJs'">
            <el-form-item>
              <el-input type="textarea" :rows="4" v-model="evt.where.fnJs"></el-input>
            </el-form-item>
          </el-form-item>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script setup lang="ts">
import type { Option } from 'element-plus/es/components/select-v2/src/select.types'
import { EventAction, type Event } from '@meta2d/core'
import { useTopologyEditorStore } from '@/store/modules/topology-editor'
import { AnimationsEventAction, ColorPredefine } from "@/components/TopologyEditor/constant";
import { Delete, Plus } from "@element-plus/icons-vue";
import { cloneDeep } from '@pureadmin/utils';
const store = useTopologyEditorStore()

declare interface CustomEvent extends Event {
  setProps: Array<{ key: string | undefined; value: string | undefined, formOption: any }> | null,
}

defineOptions({
  name: 'EditorPropsPenEvents'
})

const key = ref(0)
const activeName = ref('')
const eventTypeOptions: Option[] = [
  { value: 'enter', label: '鼠标进入' },
  { value: 'leave', label: '鼠标离开' },
  { value: 'active', label: '选中' },
  { value: 'inactive', label: '取消选中' },
  { value: 'click', label: '单击' },
  { value: 'dblclick', label: '双击' },
  { value: 'mousedown', label: '鼠标按下' },
  { value: 'mouseup', label: '鼠标抬起' },
  { value: 'valueUpdate', label: '值变化' }
]
const controlCommandOptions = computed({
  get: () => cloneDeep(store.currentPen?.controlCommand).filter(item => item.command),
  set: () => { }
})
const eventActionOptions: Option[] = [
  { value: EventAction.Link, label: '打开链接  ' },
  { value: EventAction.SetProps, label: '更改属性' },
  { value: EventAction.StartAnimate, label: '执行动画' },
  { value: EventAction.PauseAnimate, label: '暂停动画' },
  { value: EventAction.StopAnimate, label: '停止动画' },
  { value: EventAction.Emit, label: '执行控制命令' },
  // { value: EventAction.JS, label: '执行JS代码' },
  // { value: EventAction.GlobalFn, label: '执行全局函数' },
  // { value: EventAction.Emit, label: '发送消息' },
  // { value: EventAction.StartVideo, label: '播放视频' },
  // { value: EventAction.PauseVideo, label: '暂停视频' },
  // { value: EventAction.StopVideo, label: '停止视频' },
  // { value: EventAction.SendPropData, label: '发送图元数据' }
]
const urlOpenOptions: Option[] = [
  { value: '_blank', label: '新界面打开' },
  { value: '_self', label: '覆盖打开' }
]

const whereTypeOptions: Option[] = [
  { value: '', label: '无' },
  { value: 'comparison', label: '条件判断' },
  // { value: 'fnJs', label: '自定义判断' }
]
const comparisonOptions: Option[] = [
  { value: '==', label: '等于' },
  { value: '!=', label: '不等于' },
  { value: '>', label: '大于' },
  { value: '>=', label: '大于等于' },
  { value: '<', label: '小于' },
  { value: '<=', label: '小于等于' },
  { value: '[)', label: '介于' },
  { value: '![)', label: '不介于' },
  { value: '[]', label: '属于' },
  { value: '![]', label: '不属于' }
]
const propsOptions: Option[] = [
  { value: 'text', label: '文字', type: 'input' },
  { value: 'background', label: '背景颜色', type: 'color' },
  { value: 'color', label: '颜色', type: 'color' },
  { value: 'width', label: '宽度', type: 'input-number', min: 0, max: 9999, step: 1 },
  { value: 'height', label: '高度', type: 'input-number', min: 0, max: 9999, step: 1 },
  { value: 'visible', label: '显示', type: 'switch' },
  { value: 'progress', label: '进度值', type: 'input-number', min: 0, max: 1, step: 0.1 },
  { value: 'value', label: '值', type: 'input' },
  { value: 'checked', label: '开关', type: 'switch' },
  { value: 'showChild', label: '状态', type: 'showChild', min: 0, max: 9999, step: 1 }
]

//条件属性名
// const evnetOptionName: Option[] = [
//   { value: 'text', label: '文本' },
// ]
const evnetOptionName = computed(() => {
  return store.currentPen.form.filter(item => item.key.startsWith('events')).map(item => {
    return {
      value: item.key,
      label: item.dataIds.name
    }
  })
})
const penEvents = computed({
  get() {
    return (store.currentPen.events as CustomEvent[]) || []
  },
  set(val: CustomEvent[]) {
    store.currentPen.events = val
    console.log(2, store.currentPen)
    key.value++
    console.log(key.value)
  }
})

function addEvent() {
  const eventObj = {
    action: '',
    where: {
      type: null,
      value: null,
      key: null,
      comparison: null
    },
    name: '',
    value: null,
    fn: null,
    setProps: null,
  }
  const events: CustomEvent[] = store.currentPen.events ? (store.currentPen.events as CustomEvent[]) : []
  events.push(eventObj as unknown as CustomEvent)
  penEvents.value = events
}
function deleteEvent(index: number) {
  store.currentPen.events?.splice(index, 1)
}

const whereChange = (evt) => {
  console.log(evt.where.type == '');
  if (evt.where.type == '') {
    evt.where = {
      type: null,
      value: null,
      key: null,
      comparison: null
    }
  }
}

function addProp(evt: CustomEvent) {
  const propObj = { key: undefined, value: undefined, formOption: propsOptions[0] }
  evt.setProps?.push(propObj)
}
function deleteProp(evt: CustomEvent, idx: number) {
  evt?.setProps?.splice(idx, 1)
}
function onChangeName(event, evt: CustomEvent) {
  console.log('onChangeName', event, evt);
  if (event == "valueUpdate" && evt['action'] === EventAction.Emit) {
    evt['action'] = null
    evt.value = null
    evt.params = null
  }
}
function onChangeAction(event: EventAction, evt: CustomEvent) {
  evt.params = undefined
  evt.value = null
  evt.setProps = event === EventAction.SetProps ? [{ key: undefined, value: undefined, formOption: propsOptions[0] }] : null
  if (evt['action'] === EventAction.Emit) {
    evt.value = 'showBindData'
  }
}
function onPropChange(evt: CustomEvent) {
  const valueObj: Record<string, string> = {}
  evt.setProps?.forEach((prop) => {
    console.log(prop)
    valueObj[prop.key as string] = prop.value as string
  })
  evt.value = valueObj
}

function onSelect(evt: CustomEvent, row) {
  row.value = undefined
  const valueObj: Record<string, string> = {}
  evt.setProps?.forEach((prop) => {
    console.log(prop)
    prop.formOption = propsOptions.find(item => item.value === prop.key)
    valueObj[prop.key as string] = prop.value as string
  })
  evt.value = valueObj
}
</script>

<style lang="scss" scoped>
.collapse-delete-icon {
  position: absolute;
  right: 35px;
  top: 0;
  /* padding: 5px; */

  &:hover {
    color: #409eff;
  }
}

.set-props-wrapper {
  margin-bottom: 18px;

  .set-props-header {
    height: 36px;
    font-size: 12px;
    line-height: 36px;
    //display: flex;
    //justify-content: center;
    //align-items: center;
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    grid-gap: 5px;
    justify-items: center;

    .column {
      flex: 1;
      text-align: center;
      font-size: 14px;
      color: #afafaf;
    }

    .icon {
      flex: 0 30px;
      width: 0;
      font-size: 14px;
      color: #1050ab;
      text-align: center;
      cursor: pointer;

      &:hover {
        color: #409eff;
      }
    }
  }

  .set-props-content {
    .row {
      //display: flex;
      //justify-content: center;
      //align-items: center;
      display: grid;
      grid-template-columns: 2fr 2fr 1fr;
      grid-gap: 5px;
      justify-items: center;
      margin-bottom: 2px;

      .row-input {
        flex: 1;

        :deep(.el-input__inner) {
          border: 0;
        }

        &+.row-input {
          margin-left: 2px;
        }
      }

      .icon {
        flex: 0 30px;
        width: 0;
        font-size: 14px;
        color: #1050ab;
        text-align: center;
        cursor: pointer;

        &:hover {
          color: #409eff;
        }
      }
    }
  }
}

.props-grid {}
</style>
